<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/tongguanyao_1.jpg") ?>" alt="铜官窑研学基地全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/tongguanyao_2.jpg") ?>" alt="研学活动场景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/tongguanyao_3.jpg") ?>" alt="铜官窑瓷器展示环境" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                <h3 class="text-xl font-bold text-gray-800 mb-2">简介</h3>
                <div class="text-gray-600 space-y-4">
                    <p class="text-indent-8">&emsp;&emsp;铜官窑，又名长沙窑，始于初唐，盛于中晚唐，距今已有 1200 余年历史。铜官窑创烧世界釉下多彩瓷，有 “南青北白长沙彩” 之美誉，与浙江越窑、河北邢窑并称中国唐代三大出口瓷窑，是唐代全球重要的商品集市和出口贸易港，被称为千年前的世界工厂。1998 年，千年沉船 “黑石号” 于印尼海域被打捞，其中出水陶瓷有 56500 件来自长沙铜官窑。这些发现见证了长沙铜官窑曾经辉煌的历史。铜官窑古镇是由中国企业 500 强新华联集团打造的文旅综合体，再现了长沙铜官窑的繁华盛世。</p>
                </div>
            </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 深入了解铜官窑历史 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 深入了解铜官窑历史</h4>
                    <p class="text-gray-600">&emsp;&emsp;基地通过大量的文物、图片和多媒体资料，生动地展示了铜官窑的发展历程和辉煌成就。参与者可以在这里详细了解铜官窑的故事，感受它的深厚文化底蕴。</p>
                </div>
                <!-- 陶艺制作体验 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 陶艺制作体验</h4>
                    <p class="text-gray-600">&emsp;&emsp;设有陶艺制作工坊，参与者可以亲手制作属于自己的陶瓷作品，体验传统陶艺制作的乐趣和魅力，培养创造力和动手能力。</p>
                </div>
                <!-- 传统烧制工艺学习 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 传统烧制工艺学习</h4>
                    <p class="text-gray-600">&emsp;&emsp;基地安排专业的师傅讲解传统陶瓷烧制工艺，让参与者了解从泥土到瓷器的神奇转变过程，感受古代工匠的智慧和技艺。</p>
                </div>
                <!-- 诗词文化探寻 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">4. 诗词文化探寻</h4>
                    <p class="text-gray-600">&emsp;&emsp;铜官窑瓷器上的诗词是其一大特色，基地通过诗词赏析、诗词创作等活动，让参与者深入探寻铜官窑诗词文化的魅力，感受传统文化的博大精深。</p>
                </div>
                <!-- 文化传承与创新 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">5. 文化传承与创新</h4>
                    <p class="text-gray-600">&emsp;&emsp;作为传统文化教育的重要阵地，基地注重传承和创新铜官窑文化，让参与者在研学过程中接受传统文化的熏陶，激发创新思维。</p>
                </div>
            </div>

            <!-- 铜官窑研学基地一日研学课程安排 -->
            
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">【铜官窑研学基地一日研学课程安排】</h2>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <colgroup>
                <col style="width: 20%;"> <!-- 时间列 -->
                <col style="width: 20%;"> <!-- 环节列 -->
                <col style="width: 60%;"> <!-- 环节介绍列 -->
            </colgroup>
            <thead>
                <tr class="bg-gray-50">
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">9:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">抵达铜官窑古镇</td>
                    <td class="border border-gray-300 py-3 px-4">从樱花大道入口下车，步行至游客服务中心，取票过闸机入园</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">09:30 - 10:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">我是科学家</td>
                    <td class="border border-gray-300 py-3 px-4">机器人博物馆-探秘机器人世界</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">10:30 - 11:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">我是科学家</td>
                    <td class="border border-gray-300 py-3 px-4">5D影院-观看5D魔法釉传奇，感受感官冲击</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">12:00 - 13:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">午餐、午休</td>
                    <td class="border border-gray-300 py-3 px-4">享用自备套餐，午休</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">14:00 - 14:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">我是小船长</td>
                    <td class="border border-gray-300 py-3 px-4">石渚岛-黑石号剧场-重启黑石号海上丝路</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">14:30 - 15:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">我是小馆长</td>
                    <td class="border border-gray-300 py-3 px-4">守护国宝和匠心（参观长沙窑博物馆、绣珍阁、钱币博物馆、矿物宝石博物馆）</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">15:30 - 16:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">我是好少年</td>
                    <td class="border border-gray-300 py-3 px-4">参观湖湘历史名人，领略湖湘文化</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">16:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">返程</td>
                    <td class="border border-gray-300 py-3 px-4"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">小朋友们，铜官窑研学基地的奇妙之旅已经准备好啦！在这里，你们可以深入了解千年窑火文化，感受传统文化的魅力。每一个活动都充满意义，快来一起开启这场超棒的研学冒险，收获满满的知识和感动吧！</p>
            </div>
        </div>
    </div>

      <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['教育性', '互动性', '实践性', '文化性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(153, 0, 51, 0.2)',
            borderColor: 'rgba(153, 0, 51, 1)',
            borderWidth: 2,
            data: [9, 8, 9, 8, 9] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>